<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<head>
   <link rel="stylesheet" href="1.css">
</head>
<body>
   <header class="mainHeader">
      <img src="baidu.png" alt="baidu">
      <nav class="mainNav">
        <ul>
          <li><a href="#thank">Thank U</a></li>
          <li><a href="#team">团队协作</a></li>
          <li><a href="#ins">Instagram</a></li>
          <li><a href="#lastart">文章</a></li>
         </ul>
      </nav>
</header>

<article>
<header>
<h2><a name="thank">Thank You</a></h2>
<h3>感谢你们</h3>
<p class="author">
<span><time>20 March 2016</time></span>&nbsp;
<span>by kingcos</span>
</p>
</header>
<section>
<p>
感谢和我组队的同学们，也感谢百度提供这样的一次机会，可以有机会并肩作战。希望我们可以坚持下去。<br />
这是我们的<a href="http://www.baidu.com">百度</a>。教会了我们搜索。
</p>
<img class="artImg" alt="Code life." src="1.jpg" width="200px" height="200px">
</section>

<section>
<p>
在学习之前，我还是希望大家学会如何提问。我已经在团队的<strong>GitHub</strong>共享了，大家可以去看看<a href="http://www.baidu.com" target="_blank">点击查看</a>
</p>
</section>
</article>

<article>
<header>
<h2><a name="team">团队协作</a></h2>
<h3>学习Git的使用</h3>
<p class="author">
<span><time>20 March 2016</time></span>&nbsp;
<span>by kingcos</span>
</p>
</header>
<section>
<p>
其实，在去年我就自学过Git的使用，但是由于这个工具配合团队协作，版本控制才能更好的发挥效用。我也仅仅是熟悉了使用，而并没有在实际生产中使用。<br />
这是我当时的笔记：<a href="http://maimieng.com/2015/note/tls/git&github/">GitHub Notes</a>.所以借这次机会，我想把Git的使用深入到实际中，也让大家熟悉基本的使用。
</p>
<img class="artImg" alt="Code life."src="1.jpg" width="200px" height="200px">
<ul class="listOfGit">
<li><a href="https://git-scm.com">Git</a></li>
<li><a href="https://www.youtube.com/playlist?list=PLg7s6cbtAD15G8lNyoaYDuKZSKyJrgwB-">Git官方视频</a></li>
<li><a href="http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000">廖雪峰Git教程</a></li>
</ul>
</section>
</article>

<section class="pic">
<h2><a name="ins">Instagram</a></h2>

<figure>
<figcaption>Lines.</figcaption>
<img alt="Lines" src="1.jpg" width="250px" height="250px">
</figure>
<figure>
<figcaption>Yogurt.</figcaption>
<img alt="Yogurt" src="1.jpg" width="250px" height="250px">
</figure>
<figure>
<figcaption>HandWriting.</figcaption>
<img alt="HandWriting" src="1.jpg" width="250px" height="250px">
</figure>
</section>

<article>
<header>
<h2><a name="lastart">文章标题</a></h2>
<p class="author">
<span><time>发布时间</time></span>&nbsp;
<span>作者</span>
</p>
</header>

<ol>
<li>排名 1</li>
<li>排名 2</li>
<li>排名 3</li>
</ol>

<section>
<caption>Table</caption>
<table class="stuTab">
<thead>
<th>学号</th>
<th>性别</th>
<th>成绩</th>
</thead>
<tbody>
<tr>
<td>001</td>
<td>男</td>
<td><a href="#">操作</a></td>
</tr>
<tr>
<td>002</td>
<td>女</td>
<td><a href="#">操作</a></td>
</tr>
<tr>
<td colspan="2">平均分</td>
<td><a href="#">操作</a></td>
</tr>
</tbody>
</table>
</section>
</article>

<aside>
<header>
<h3>帐号注册</h3>
</header>
<div class="form">
<form>
<div>
<div class="record">请输入邮箱地址：</div>
<input type="text" placeholder="这是一个文本输入框">
</div>
<div>
<div class="iptTip">
邮箱地址请按要求格式输入
</div>
</div>
<div>
<div class="record">请输入密码：</div>
<input type="password">
</div>
<div>
<div class="record">请重复输入密码：</div>
<input type="password">
</div>
<div>
<div class="iptTip">
密码请为6-16位英文数字
</div>
</div>
<div>
<div class="record">性别：</div>
<label><input type="radio" name="sex" checked>男</label>
<label><input type="radio" name="sex">女</label>
</div>
<div>
<div class="record">城市</div>
<select name="city">
<option selected>河南</option>
<option>河南</option>
<option>河南</option>
</select>
</div>
<div>
<div class="record">爱好：</div>
<label><input type="checkbox">运动</label>
<label><input type="checkbox">艺术</label>
<label><input type="checkbox">科学</label>
</div>
<div>
<div class="record">个人描述：</div>
<textarea id="descTxt" cols="50" rows="8">请输入您的个人描述</textarea>
</div>
<button id="submitBtn" type="submit">确认提交</button>
</form>
</div>
</aside>
<footer>
版权所有&copy;
</footer>
</body>
</html>